import React from 'react';
import { View, ImageBackground, Text } from 'react-native';

import styles from './style';
import IconFont from './../../assets/iconfont';
import Images from './../../constants/images';

function QueryNav() {
  return (
    <View style={styles.queryNavContainer}>
      <View style={styles.queryNav}>
        <View style={[styles.queryNavItem, styles.queryNavItemStyle1]}>
          <View style={styles.queryNavItemTop}>
            <IconFont name="icon-chachejiahao" size="32" />
          </View>
          <View style={styles.queryNavItemBottom}>
            <Text style={styles.queryNavItemText}>查车架号</Text>
          </View>
          <ImageBackground
            source={Images.query_nav_bg_01}
            style={styles.queryNavItemBgImage}
          />
        </View>
        <View style={[styles.queryNavItem, styles.queryNavItemStyle2]}>
          <View style={styles.queryNavItemTop}>
            <IconFont name="icon-cheliangpinpai" size="32" />
          </View>
          <View style={styles.queryNavItemBottom}>
            <Text style={styles.queryNavItemText}>车辆品牌</Text>
          </View>

          <ImageBackground
            source={Images.query_nav_bg_01}
            style={styles.queryNavItemBgImage}
          />
        </View>
        <View style={[styles.queryNavItem, styles.queryNavItemStyle3]}>
          <View style={styles.queryNavItemTop}>
            <IconFont name="icon-baoxianshangjia" size="32" />
          </View>
          <View style={styles.queryNavItemBottom}>
            <Text style={styles.queryNavItemText}>保险商家</Text>
          </View>

          <ImageBackground
            source={Images.query_nav_bg_01}
            style={styles.queryNavItemBgImage}
          />
        </View>
        <View style={[styles.queryNavItem, styles.queryNavItemStyle4]}>
          <View style={styles.queryNavItemTop}>
            <IconFont name="icon-cheliangpeijian" size="32" />
          </View>
          <View style={styles.queryNavItemBottom}>
            <Text style={styles.queryNavItemText}>车辆配件</Text>
          </View>

          <ImageBackground
            source={Images.query_nav_bg_01}
            style={styles.queryNavItemBgImage}
          />
        </View>
      </View>
      <View style={styles.querySubNav}>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-qichekongtiao6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>汽车空调</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-pinpaijiyou6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>品牌机油</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-fadongji6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>发动机</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-dianhuokaiguan6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>点火开关</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-qicheboli6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>汽车玻璃</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-shujuxian6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>数据线</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-luntai6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>轮胎</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-chachexitong6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>刹车系统</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-yuguapian6464" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>雨刮片</Text>
          </View>
        </View>
        <View style={styles.querySubNavItem}>
          <View style={styles.querySubNavItemTop}>
            <IconFont name="icon-zu661" size="40" />
          </View>
          <View style={styles.querySubNavItemBottom}>
            <Text style={styles.querySubNavItemText}>更多</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

export default QueryNav;
